<template>
    <div class="FooterTab">
    <div :class="{item:true,active:pagename==='home'}" @click="classClick('/')">
      <span class="iconfont">&#xe62e;</span>
      <span class="txt">猜你喜欢</span>
    </div>
    <div :class="{item:true,active:pagename==='classify'}" @click="classClick('/classify')">
      <span class="iconfont">&#xe652;</span>
      <span class="txt">分类</span>
    </div>
    <div :class="{item:true,active:pagename==='cart'}" @click="classClick('/cart')">
      <span class="iconfont">&#xe61b;</span>
      <span class="txt">购物车</span>
    </div>
    <div :class="{item:true,active:pagename==='admin'}" @click="classClick('/admin')">
      <span class="iconfont">&#xe615;</span>
      <span class="txt">我的易购</span>
    </div>
  </div>
</template>
<script>
import { useRoute, useRouter } from 'vue-router'
// 点击跳转分类页面  
const ClassClick = ()=>{
  // 路由跳转
  const router = useRouter()
  const classClick = (path)=>{
    router.push(path)
  }
  return {classClick}
}
export default {
  name:"FooterTab",
  props:['pagename'],
  setup() {
    const {classClick} = ClassClick()
    return {classClick}
  }
}
</script>
<style scoped lang="scss">
.FooterTab {
  border-top: .005rem solid #ccc;
  width: 100%;
  height: .5rem;
  background-color: white;
  position: fixed;
  bottom: 0;
  display: flex;
  align-items: center;
  .item {
    display: flex;
    flex-direction: column;
    text-align: center; 
    width: 25%;
    .iconfont {
      font-size: .22rem;
      color: rgb(130, 130, 130);
    }
    .txt {
      font-size: .10rem;
      color: rgb(130, 130, 130);
    }
  }
  .item.active span{
    color: #ffc700;
  }
}
</style>